<template>
  <div class="common-layout">
    <el-container>
      <el-header class="navBox">
        <el-row class="header_row">
          <el-col :span="1"></el-col>
          <el-col :span="3" @click="toIndex">
            <img src="@/assets/images/logo.png" />
          </el-col>
          <el-col :span="10" class="textBox">
            <span
              style="margin-right: 50px; font-size: 19px"
              :class="isActive === 0 ? 'active' : ''"
              @click="toIndex"
              >资源</span
            >
            <span
              style="margin-right: 50px; font-size: 19px"
              :class="isActive === 1 ? 'active' : ''"
              @click="toDiscovery"
              >课程</span
            >
            <span
              style="margin-right: 50px; font-size: 19px"
              :class="isActive === 2 ? 'active' : ''"
              @click="toTraining"
              >练习室</span
            >
            <span
              style="margin-right: 50px; font-size: 19px"
              :class="isActive === 3 ? 'active' : ''"
              @click="toCommunication"
              >交流</span
            >
            <span
              style="margin-right: 50px; font-size: 19px"
              :class="isActive === 4 ? 'active' : ''"
              @click="toMy"
              >我的</span
            ></el-col
          >
          <el-col :span="4"></el-col>
          <el-col :span="2">
            <ele-Iphone style="width: 20px" />
            <span>下载App</span></el-col
          >
          <el-col :span="2">
            <el-button icon="ele-Plus" size="default" color="#f93684" round>
              <span>发布</span></el-button
            >
          </el-col>
          <el-col :span="1" @click="toHome">
            <el-avatar icon="ele-UserFilled" />
          </el-col>
          <el-col :span="1"></el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "index",
});
</script>
<script setup lang="ts">
import useHeaderState from "./hooks";
const headerState = useHeaderState();
const {
  isActive,
  toIndex,
  toDiscovery,
  toTraining,
  toCommunication,
  toMy,
  toHome,
} = headerState;
</script>
<script lang="ts" setup></script>
<style scoped lang="scss">
.common-layout {
  .navBox {
    height: 75px;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    .header_row {
      margin-top: 20px;
      img {
        width: 135px;
        padding: 0;
      }
      .textBox {
        margin-top: 5px;
        span {
          line-height: 20px;
        }
        .active {
          color: crimson;
        }
      }
      svg {
        vertical-align: middle;
      }
    }
  }
}
</style>
